<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
    h2{
        color:aqua;
    }
    
    .helight {
        background-color: yellow;
        /* width: 100px; */
        /* height: 100px; */
        /* border: 1px solid black; */
    }

    #id {
        color: red;
        font-size: 40px;
        font-weight: bold;
    }

    /* .yyyy p {
        color: green;
        font-size: 20px;
        font-weight: bold;
    } */

    /* .yyyy p {
        color: blue;
        font-size: 15px;
        font-weight: bold;
    } */

    *{
        font-family: kaiti;
    }

    h3+h4 {
        color: purple;
        font-size: 30px;
        font-weight: bold;
    }

    p:hover {
        color: orange;
        font-size: 25px;
        font-weight: bold;
    }

    .xxx:first-child {
        color: pink;
        font-size: 20px;
        font-weight: bold;
    }

    </style>
</head>
<body>
    <h1>不同类型的CSS选择器</h1>
    <h2>这是一个元素选择器示例</h2>
    <div class="helight">这是一个类选择器示例</div>
    <div id="id">这是一个id选择器示例</div>
    <div class="yyyy">
        <p>这是一个子元素选择器示例1</p>
        <p>这是一个子元素选择器示例2</p>
        <p>这是一个子元素选择器示例3</p>
        <div class="xxx">
            <p>这是一个后代元素选择器示例1</p>
            <p>这是一个后代元素选择器示例2</p>
        </div>
    <h3>这是一个相邻兄弟选择器示例1</h3>
    <h4>这是一个相邻兄弟选择器示例2</h4>
    <h5>这是一个相邻兄弟选择器示例3</h5>

    <p>这是一个伪类选择器</p>
    </div>
</body>
</html>